﻿<!DOCTYPE html>
<html id="home" lang="en">
    
    <head>
        <title>Simplest RTCDataConnection Test ® Muaz Khan</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset=utf-8>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <link rel="author" type="text/html" href="https://plus.google.com/100325991024054712503">
        <meta name="author" content="Muaz Khan">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <script>
            var hash = window.location.hash.replace('#', '');
            if (!hash.length) location.href = location.href + '#' + (Math.random() * 1000 << 10);
        </script>
        <style>
            @import url(https://fonts.googleapis.com/css?family=Inconsolata);
            html {
                background: #eee;
            }
            body {
                margin: 0;
                font-family:"Inconsolata", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
                font-size: 1.2em;
                line-height: 1.2em;
            }
            article, footer {
                display: block;
                min-width: 360px;
                max-width: 900px;
                width: 80%;
            }
            article {
                margin: 2.5em auto 0 auto;
                border: 1px solid;
                border-color: #ddd #aaa #aaa #ddd;
                padding: 2em;
                background: #fff;
            }
            h1 {
                margin-top: 0;
            }
            article p:first-of-type {
                margin-top: 1.6em;
            }
            article p:last-child {
                margin-bottom: 0;
            }
            footer {
                margin: 0em auto 2em auto;
                text-align: center;
            }
            footer a {
                color: #666;
                text-shadow: 0 1px 1px #fff;
                text-decoration:none;
                font-size:inherit;
                padding: 1em;
            }
            footer a:hover, footer a:focus {
                color: #111;
            }
            h1, h2 {
                font-weight:normal;
                display:inline;
                border-bottom:1px solid black;
                padding:0 0 3px 0;
                line-height: 36px;
            }
            a {
                color:#2844FA;
                text-decoration:none;
            }
            a:hover, a:focus {
                color:#1B29A4;
            }
            a:active {
                color:#000;
            }
            :-moz-any-link:focus {
                color:#000;
                border:0;
            }
            ::selection {
                background:#ccc;
            }
            ::-moz-selection {
                background:#ccc;
            }
            button {
                -moz-border-radius: 3px;
                -moz-transition: none;
                -webkit-transition: none;
                background: #0370ea;
                background: -moz-linear-gradient(top, #008dfd 0, #0370ea 100%);
                background: -webkit-linear-gradient(top, #008dfd 0, #0370ea 100%);
                border: 1px solid #076bd2;
                border-radius: 3px;
                color: #fff;
                display: inline-block;
                font-size: .8em;
                line-height: 1.3;
                padding: 5px 12px;
                text-align: center;
                text-shadow: 1px 1px 1px #076bd2;
                font-family:inherit;
            }
            button:hover {
                background: rgb(9, 147, 240);
            }
            button:active {
                background: rgb(10, 118, 190);
            }
            button[disabled] {
                background: none;
                border: 1px solid rgb(187, 181, 181);
                color: gray;
                text-shadow: none;
            }
            strong {
                color: rgb(204, 14, 14);
                font-family:inherit;
                font-weight:normal;
            }
            #result div {
                padding: .8em 1.5em;
                border: 1px solid Gray;
                border-bottom: 0;
            }
        </style>
        <!-- for HTML5 el styling -->
        <script>
            document.createElement('article');
            document.createElement('footer');
        </script>
		
        <script src="https://cdn.firebase.com/v0/firebase.js"></script>
        <script src="https://bit.ly/RTCDataConnection-v1-0"></script>
    </head>
    
    <body>
        <article>
            <a href="http://bit.ly/webrtc-home" style="border-bottom: 1px solid red; color: red; font-size: 1.2em; position: absolute; text-decoration: none;right:0;top:0;">←HOME</a>
             <h1>
				Simplest RTCDataConnection Test / <a href="https://googledrive.com/host/0B6GWd_dUUTT8RzVSRVU2MlIxcm8/RTCDataConnection/">Other Demos</a>
			</h1>

            <p>
				Copyright © 2013 <a href="https://github.com/muaz-khan" target="_blank">Muaz Khan</a>&lt;<a href="http://twitter.com/muazkh" target="_blank">@muazkh</a>&gt;.	
			</p>
            
			<section class="plusone-gplus">
                <div class="g-plusone" data-href="https://www.webrtc-experiment.com/"></div>
            </section>
            
			<div id="result"></div>
            <input type="text" id="input-message" style="font-size:2em;width:100%;">
            <button id="open-connection">Open Data Connection</button>
            <input type="file" id="file">
			
            <script>
                var rtcDataConnection = new RTCDataConnection({
                    onmessage: function (data) {
                        appendDIV(data);
                    },
                    openSignalingChannel: function (config) {
                        if (!window.Firebase) return;
                        var channel = config.channel || location.hash.replace('#', '') || 'RTCDataConnection-Test';
                        var socket = new Firebase('https://chat.firebaseIO.com/' + channel);
                        socket.channel = channel;
                        socket.on("child_added", function (data) {
                            config.onmessage && config.onmessage(data.val());
                        });
                        socket.send = function (data) {
                            this.push(data);
                        };
                        config.onopen && setTimeout(config.onopen, 1);
                        socket.onDisconnect().remove();
                        return socket;
                    }
                });

                document.getElementById('open-connection').onclick = function () {
                    rtcDataConnection.initDataConnection();
                    this.disabled = true;
                };

                document.getElementById('file').onchange = function () {
                    var file = this.files[0];
                    rtcDataConnection.send(file);
                };
            </script>
            <script>
                var result = document.getElementById('result');

                function appendDIV(data) {
                    var div = document.createElement('div');
                    div.innerHTML = data;
                    result.appendChild(div);
                }

                document.getElementById('input-message').onchange = function () {
                    appendDIV(this.value);
                    rtcDataConnection.send(this.value);
                    this.value = '';
                };
            </script>
            <br /><br />
			<h2>How to use RTCDataConnection? <a href="https://bit.ly/RTCDataConnection" target="_blank">Documentation</a></h2>
			<pre>
&lt;script src="<a href="https://bit.ly/RTCDataConnection-v1-0" target="_blank">https://bit.ly/RTCDataConnection-v1-0</a>"&gt;&lt;/script&gt;
var rtcDataConnection = new RTCDataConnection({
    <strong>onmessage</strong>: function (data) {
        console.log(data);
    },
    <strong>openSignalingChannel</strong>: function (config) {
        // <a href="https://github.com/muaz-khan/WebRTC-Experiment#use-your-own-socketio-implementation" target="_blank">How to use your own socket.io implementation?</a>
    },
	
    // 'one-to-one' or 'one-to-many' or 'many-to-many'
    <strong>direction</strong>: 'one-to-many'
});

// Only <strong>session initiator</strong> should call below line; 
// All other 10000 room participants don't need to call "initDataConnection"!
rtcDataConnection.<strong>initDataConnection</strong>();

// to send file/data /or text
var file = inputFile.files[0];
rtcDataConnection.<strong>send</strong>( <strong>file</strong> );

rtcDataConnection.<strong>send</strong>( <strong>data</strong> );
rtcDataConnection.<strong>send</strong>( <strong>'text'</strong> );
</pre>

			<br /><br />
            <table style="width: 100%;">
                <tr>
                    <td>
                        <div>
                            <textarea id="message" style="height: 8em; width: 100%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
                        </div>
                        <button id="send-message" class="send-message" style="font-size: 1em;">Send Message</button>
                    </td>
                </tr>
            </table>
        </article>
        <footer>
            <p>
                <a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a>©
                <a href="https://plus.google.com/100325991024054712503" rel="author" target="_blank">Muaz Khan</a>, <span> 2013 </span> »
                <a href="mailto:muazkh@gmail.com" target="_blank">Email</a>»
                <a href="http://twitter.com/muazkh" target="_blank">@muazkh</a>»
                <a href="https://github.com/muaz-khan" target="_blank">Github</a>
            </p>
        </footer>
        <script src="https://bit.ly/commonjs"></script>
    </body>

</html>